<template>
	<!--
	    author: 李文昊
	    leftRight-content: 总包裹，fixed布局
		left-container:导航栏flex布局,
	-->
	<view class="leftRight-content">
		<view class="left-container">
			<view class="container-flex">
				<view class="container-flex-item" v-for="(item,index) in floorList" :key="index" @click="father(index)"
					:class="{'active3':styleIndex==index}">
					<view class="container-flex-item-div" :class="{'active1':styleIndex==index}">
					</view>
					<text class="container-flex-item-text2"
						:class="{'active2':styleIndex==index}">{{item.floorName}}</text>
				</view>
			</view>
		</view>
		<con-list-right :floorList="conRightList"></con-list-right>
	</view>
</template>

<script>
	export default {
		props: {
			floorList: Array
		},
		data() {
			return {
				lineHeightData: "",
				styleIndex: 0,
				conRightList: this.floorList,
			}
		},
		methods: {
			father(index) {
				console.log("会议室子组件",index)
				this.styleIndex = index;
				if (index == 0) {
					this.conRightList = this.floorList;
					console.log("会议室子组件2",this.conRightList)
				} else {
					let a = [];
					a.push(this.floorList[index]);
					this.conRightList = a;
				}
			}
		}
	}
</script>

<style>
	.left-container {
		width: 25%;
		position: fixed;
		left: 0;
		z-index: 5;
		background-color: rgb(248, 248, 248);
		height: 100%;
	}

	.container-flex {
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-flow: column;
		/* 竖直布局，竖向的高度超出会有滑块产生 */
		overflow: auto;
	}

	.container-flex-item {
		width: 100%;
		height: 80rpx;
		/* 文字居中 */
		text-align: center;
		font-size: 26rpx;
		font-family: '微软雅黑';
		overflow: hidden;
		position: relative;
	}

	.container-flex-item-div {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		display: inline-block;
		width: 8rpx;
		height: 44rpx;
	}

	.container-flex-item text {
		height: 33rpx;
		/* 让text填充，由于没有设置宽度，只会上下填充外边距 */
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.active1 {
		background-color: red;
	}

	.active2 {
		font-family: '微软雅黑 Bold';
		font-weight: 700;
	}

	.active3 {
		background-color: #FFF;
	}
</style>
